<template> 
    <div ref="lotPlayTab" class="maskLayer" @click="closeTab()">
        <div class="flex-box flex-wp tx-c bg-c-wh pad">
            <div class="wd-33" v-for="(item, i) in thisTab" :key="i">
                <div class="bjTab" :class="{
                    'check' : $store.state.lotIndex == i,
                    'check1' : $store.state.lotIndex != i
                }" @click="togBjTab(i, item)">{{ item }}</div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css' 
import Trans from '../../common/js/eventTrans'
import { lotSelObj } from '../../common/js/data'
export default {
    data () {
        return {
            thisTab : '',
            tabArr : {
                bjpk10 : [
                    '冠亚和', '1至5名', '6至10名'
                ],
                cqssc : [
                    '两面盘', '1至5球', '前中后', '一字组合', '二字组合', '三字组合', '二字定位', '三字定位', '组选三', '组选六', '跨度', '和数'
                ],
                xglhc : [
                    '特码', '正码', '正特码', '连码', '过关', '特肖', '特码头尾', '五行', '半波', '七码', '六肖', '一肖尾数', '生肖连', '尾数连', '不中', '多选中一', '特平中'
                ],
                gdsyxw : [
                    '两面盘', '单码', '任选', '组选', '直选'
                ],
                gdklsf : [
                    '两面盘', '第一球', '第二球', '第三球', '第四球', '第五球', '第六球', '第七球', '第八球', '任选'
                ],
                bjkb : [
                    '总和', '五行', '正码'
                ],
                jstb : [
                    '骰宝', '全骰围骰', '长牌', '短牌', '点数'
                ],
                pcdd : [
                    '两面盘', '特码'
                ]
            },
            lhcPlay : ['连码', '六肖', '生肖连', '尾数连', '组选', '直选', '任选'],
            prompts : ['连码', '一肖尾数', '生肖连', '尾数连', '任选', '组选', '直选'],
            lotSelObj : lotSelObj
        }
    }, 
    created () {
        this.$store.state.lotIndex = 0
        this.thisTab = this.tabArr[this.lotSelObj[this.$store.state.lotType]]
        this.$store.state.lotTitle = this.thisTab[0]
    },
    methods : {
        togBjTab (index, title) {
            // 切换页面详情列表
            Trans.$emit('togLotteryTab')
            this.$store.state.lhcTra = -1
            this.$store.state.lotIndex = index
            this.$store.state.lotTitle = title
            if( this.lhcPlay.indexOf(title) > -1){
                if(title == '任选'){
                    if(index == 9) this.$store.state.lhcPlay = 2
                }else{
                    this.$store.state.lhcPlay = 2
                }
            }else if(index == 14 || index == 15){
                this.$store.state.lhcPlay = 5
            }else{
                this.$store.state.lhcPlay = -1
            }
            if(this.prompts.indexOf(title) > -1){
                this.$store.state.prompts = 0
            }else{
                this.$store.state.prompts = -1
            }
        },
        closeTab () {
            this.$store.state.lotPlayTab = !this.$store.state.lotPlayTab
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.maskLayer
    position : fixed
    top : 2.75rem
    bottom : 0
    width : 100%
    z-index : 500
    background : rgba(0, 0, 0, 0.6)
.pad
    padding : .75rem .5rem
.bjTab
    margin : .25rem
    line-height : 2.75rem
    background-size: 100% 100%
.check
    background-image : url('../../common/image/check.png') 
.check1 
    background-image : url('../../common/image/check1.png')
</style>